<template>
  <el-dialog
    :title="detail.title || ''"
    v-model="dialogVisible"
    width="480px"
    @close="handleClose"
    align-center
    center
    :append-to-body="true"
    :close-on-click-modal="false"
    class="customer-dialog">
    <div class="dialog-content">
      <p class="content">{{ detail.content }}</p>

      <template>
        <div class="info-item">内容: {{ detail.content }}</div>
      </template>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancelFn">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
  import { getMessageById, getMessageList,redMessage } from '@/api/index';

  const props = defineProps({
    show: {
      type: Boolean,
      required: true
    },
    id: {
      type: Number,
      required: true
    }
  });

  const emit = defineEmits(['update:show', 'updateList']);

  const dialogVisible = computed({
    get() {
      return props.show;
    },
    set() {
      emit('update:show', false);
    }
  });

  // 关闭
  function handleClose() {
    emit('update:show', false);
  }

  // 取消
  function cancelFn() {
    handleClose();
  }

  let detail = ref({});
  function getDetail() {
    getMessageById(props.id).then(res => {
      detail.value = res.data;
      if(res.success){
        getMessageListfn()
      }
    });
  }
  function getMessageListfn(){
    getMessageList({
      page: 1 ,
      pageSize:50,
      read:false
    }).then(res => {
      userStore.messagesnum = res.data.totalElements;
    });
  }

  onMounted(() => {
    getDetail();
  });
</script>

<style lang="scss" scoped>
  .dialog-content {
    .content {
      line-height: 24px;
      font-size: 16px;
    }

    .info-box {
      margin-top: 20px;
      line-height: 24px;
    }
  }
</style>
